<template>
    <view :class="themeName">
		<!-- 提示 -->
		<u-notice-bar :list="noticeList"></u-notice-bar>
		
        <!-- 申请售后头部商品 -->
        <view class="m-t-20 bg-white flex p-24 p-l-30">
            <u-image :src="goodsData.goods_image" width="160rpx" height="160rpx" mode="aspectFill"></u-image>
            <view class="m-l-12">
                <view class="nr line-2 m-b-10">
                    {{goodsData.goods_name}}
                </view>
                <view class="xs muted">
                    {{goodsData.spec_value_str}}
                </view>
            </view>
        </view>

        <!-- 售后方式选择 -->
        <view class="bg-white m-t-24 p-t-24 p-b-24" v-if="refund_method==0">
            <view class="flex row-between p-r-20 p-b-20 p-l-20 bb" @click="getAfterSaleGoods(1)">
                <view class="">
                    <view class="md normal">仅退款</view>
                    <view class="xs muted m-t-10">未收到货，与卖家协商同意无需退货只需退款</view>
                </view>
                <u-icon name="arrow-right" size="22"></u-icon>
            </view>
            <view class="flex row-between p-r-20 m-t-24 p-l-20" @click="getAfterSaleGoods(2)">
                <view class="">
                    <view class="md normal">退货退款</view>
                    <view class="xs muted m-t-10">已收到货，需退还收到的实物</view>
                </view>
                <u-icon name="arrow-right" size="22"></u-icon>
            </view>
        </view>

        <view class="bg-white m-t-24" v-else>
            <view class="p-t-24 p-l-15">
                <view class="flex row-between bb p-b-24">
                    <text class="nr normal">数量</text>
                    <text class="p-r-20">{{goodsData.goods_num}}</text>
                </view>
            </view>
            <view class="p-t-24 p-l-15">
                <view class="flex row-between bb p-b-24">
                    <view class="nr normal">退款金额</view>
                    <price class="m-r-20" :content="goodsData.total_pay_price" color="#FF2C3C" mainSize="28rpx"
                        minorSize="26rpx"></price>
                </view>
            </view>
            <view class="p-t-24 p-l-15" @click="showPop = true">
                <view class="flex row-between bb p-b-24">
                    <view class="nr normal">退款原因</view>
                    <view class="m-r-20">
                        <text class="p-r-15 muted nr">{{reasonIndex}}</text>
                        <u-icon name="arrow-right"></u-icon>
                    </view>
                </view>
            </view>

            <view class="p-t-24 p-l-15">
                <view class="flex row-between col-top bb p-b-24">
                    <view class="nr normal flex-none">退款说明</view>
                    <view class="m-r-20 flex-1 m-l-20">
                        <textarea class="bg-body" style="width: 100%;" placeholder="请描述申请售后的具体原因，100字以内" v-model="remark"
                            name="textarea"></textarea>
                    </view>
                </view>
            </view>

            <view class="p-t-24 p-l-15 p-b-44">
                <view class="flex row-between p-b-24">
                    <view class="nr normal">上传凭证</view>
                    <view class="m-r-12 muted nr">
                        （选填，最多可上传3张）
                    </view>
                </view>

                <uploader v-model="fileList" mutiple :deletable="true" preview-size="160rpx" :maxUpload="3" image-fit="aspectFill" />
            </view>
        </view>

        <view v-if="refund_method !== 0" class="post-btn flex row-center br60 lg white" @click="applyRefundFun">
            申请退款
        </view>

        <u-popup id="popup" v-model="showPop" border-radius="14" mode="bottom" :closeable="true">
            <view class="bg-white">
                <view class="pop-header flex row-center md normal">
                    退款原因
                </view>
                <scroll-view style="height: 800rpx" :scroll-y="true">
                    <radio-group @change="radioChange" class="m-t-20">
                        <label v-for="(item, index) in goodsData.reason" :key="index"
                            class="reason-item flex row-between" @click="showPop = false">
                            <view class="reason-desc nr">
                                {{item}}
                            </view>
                            <radio style="transform: scale(.7);" color="#FF2C3C" :value="index+''"></radio>
                        </label>
                    </radio-group>
                </scroll-view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import {
        apiAfterSaleGoods,
        apiAfterSalePost
    } from "@/api/order.js";
    export default {
        data() {
            return {
				noticeList: ['订单所产生的运费，如已经发货的订单平台是不予退回的，请谨慎操作！'],
                id: 1,
                current: 0, //选择原因的索引
                refund_method: 0, //是否显示售后方式选择
                showPop: false, //显示退货退款原因弹窗
                reasonIndex: '请选择退款原因', //退货退款原因数据
                remark: '', //  备注退款原因
                fileList: [],  //上传凭证
                goodsData: {
                    "goods_name": "哈比树儿童滑滑梯室内汽车滑梯家用玩具宝宝小型秋千组合游乐园",
                    "goods_image": "https://img0.baidu.com/it/u=2635130093,4202492912&amp;fm=26&amp;fmt=auto&amp;gp=0.jpg",
                    "spec_value_str": "红色,L码",
                }
            }
        },

        onLoad() {
            const options = this.$Route.query
            this.id = options.id
            this.getAfterSaleGoods();
        },

        methods: {
            // 获取商品自订单商品
            getAfterSaleGoods(methods = '') {
                if(methods !='') {
                    this.refund_method = methods
                }
                apiAfterSaleGoods({
                    order_goods_id: this.id,
                    refund_method: methods
                }).then(res => {
                    this.goodsData = res
                })
            },

            // 选择退款原因
            radioChange(event) {
                this.reasonIndex = this.goodsData.reason[event.detail.value]
            },
            
            // 提交售后
            applyRefundFun() {
                if (this.reasonIndex == '请选择退款原因') {
                  return this.$toast({
                    title: '请选择退款原因'
                  });
                }
                
                apiAfterSalePost({
                    refund_remark: this.remark,
                    refund_method: this.refund_method,
                    refund_reason: this.reasonIndex,
                    order_goods_id: this.id,
                    voucher: this.fileList
                }).then(res => {
                    uni.redirectTo({
                        url: `/bundle/pages/after_sale/after_sale`
                    })
                })
            }
        }
    }
</script>

<style lang="scss">
    .bb {
        border-bottom: 1rpx solid #F2F2F2;
    }

    textarea {
        flex: 1;
        height: 172rpx;
        border-radius: 10rpx;
        padding: 20rpx;
        box-sizing: border-box;
    }

    .pop-header {
        line-height: 42rpx;
        padding: 30rpx;
    }

    .reason-item {
        padding: 20rpx;

        .reason-desc {
            line-height: 46rpx;
        }
    }

    .post-btn {
        height: 84rpx;
        margin: 40rpx 24rpx 0 24rpx;
        @include background_color();
    }
</style>
